<template>
	<view class="content">
		<u-navbar :autoBack="true" :leftIconColor="titleColor" :border-bottom="false" :bgColor="'transparent'"></u-navbar>
		<view class="u-content">
			<view class="top-mes">
				<view class="door-name u-line-1">
					{{doorMes.name}}
				</view>
				<view class="desk-price u-flex">
					<view class="price-item">
						台球：<text>{{doorMes.poolTablePrice}}</text>元/小时
					</view>
				</view>
				<view class="adress-phone u-flex">
					<view class="time-adress">
						<view class="u-flex">
							<image src="../../static/date-icon.png" mode=""></image>
							<text>营业时间：{{doorMes.hours}}</text>
						</view>
						<view class="u-flex">
							<image src="../../static/adres-prey.png" mode=""></image>
							<text class="u-line-1">{{doorMes.address}}</text>
							<u-icon name="arrow-right" size="14" color="#666666"></u-icon>
						</view>
					</view>
					<view class="call-phone-adress u-flex">
						<view class="u-flex-col" @click="tenxun">
							<image src="../../static/dao-icon.png" mode=""></image>
							<text>导航</text>
						</view>
						<view class="u-flex-col" @click="makePhoneCall(doorMes.phone)">
							<image src="../../static/phone-icon.png" mode=""></image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>
			<view class="play-area">
				<view class="play-con-title u-flex">
					<view class="play-tit active u-flex-col">
						<text>中式台球</text>
						<view class="line-down"></view>
					</view>
				</view>
				<view class="desk-item">
					<view class="price-time u-flex">
						<view>台球桌</view>
						<view class="time">
							{{doorMes.hours}} <text>{{doorMes.poolTablePrice}}</text>元/小时
						</view>
					</view>
					<view class="desk-table u-flex">
						<view class="desk-table-item u-flex-col" :class="{'desk-table-item-grey':((item.storeRoomStatus === 1 || item.storeRoomStatus === 2) && !isMyOpenTable(item))}"
                  v-for="(item,index) in doorMes.storeRoomList" :key="item.roomId">
							<view class="num">{{item.storeRoomName}}</view>
							<view class="playing" v-show="item.storeRoomStatus === 1">对局中</view>
							<view class="playing" v-show="item.storeRoomStatus === 2">暂停使用</view>
							<image src="../../static/playing.png" mode="" v-show="isMyOpenTable(item) && item.storeRoomStatus === 1"></image>
							<view class="open-btn-now" v-show="false">立即开台</view>
							<view class="over-btn" v-show="false">结束订单</view>
							<view class="desk-btn u-flex" v-show="item.storeRoomStatus === 0">
								<view class="due-btn" @click="()=>toReserv(item)">
									预定
								</view>
								<view class="open-btn" @click="()=>toDetail(item)">
									立即开台
								</view>
							</view>
              <view class="time" v-if="item.storeRoomStatus === 1">
                <view class="time__custom">
                  <view class="time__custom__item">{{timerHour(item.serverStartTime)}}</view>
                </view>
                <view class="time__item">:</view>
                <view class="time__custom">
                  <view class="time__custom__item">{{timerMinute(item.serverStartTime)}}</view>
                </view>
                <view class="time__item">:</view>
                <view class="time__custom">
                  <view class="time__custom__item">{{timerSecond(item.serverStartTime)}}</view>
                </view>
              </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btm-area u-flex">
			<view class="left-btm u-flex">
				<view class="u-flex-col">
					<image src="../../static/cz_active.png" mode="" @click="goPage('/pages/subPack/discounts/details?nav=1')"></image>
					<text>会员充值</text>
				</view>
				<view class="u-flex-col">
					<image src="../../static/kjdh.png" mode="" @click="goPage('/pages/subPack/discounts/details?nav=0')"></image>
					<text>卡券兑换</text>
				</view>
			</view>
			<view class="scan-btn" @click="scanQRCode">
				扫码开台
			</view>
		</view>
	</view>
</template>

<script>
	import { goTenXunLoca } from "@/utils/tenxunLoca.js";
  import {mapGetters} from 'vuex';
  import { getOrderListByUserId } from '@/api/order';
	export default {
		data() {
			return {
				title:'',
				titleColor:'#ffffff',
				content: ``,
				timeData: {},
				openShow:true,
				doorMes:{},
        orderList:[]
			}
		},
    onLoad(option) {
			 if (Object.keys(this.doorMes).length === 0){
          this.doorMes=JSON.parse(option.doorMes)
			 }
		},
    computed: mapGetters(['userInfo']),
    onShow() {
      if(this.userInfo && this.userInfo.uid){
        this.getPlayingOrder()
      }
    },
		methods:{
			onChange(e) {
				this.timeData = e
			},
      //获取当前用户正在服务中的订单，用于判断当前桌台是否是自己在使用
      getPlayingOrder() {
        let param = {startFlag:2}
        getOrderListByUserId(param).then(res => {
          this.orderList = res.data
        })
      },
      //判断当前桌台是否是自己在使用
      isMyOpenTable(item) {
        let flag = false
        this.orderList.forEach(order => {
          if (order.storeId === this.doorMes.id && order.storeRoomId === item.roomId) {
            flag = true;
            return flag;
          }
        })
        return flag
      },
			//开台
			toDetail(data){
				let storeRoom=this.doorMes;
				//delete storeRoom.storeRoomList;
				uni.navigateTo({
					url:`/pages/content/detail?deskMes=${JSON.stringify(data)}&storeRoom=${JSON.stringify(storeRoom)}`
				})
			},
			//预约开台
			toReserv(data){
				let storeRoom=this.doorMes;
				//delete storeRoom.storeRoomList;
				uni.navigateTo({
					url:`/page_subscribe/reservation/reservation?deskMes=${JSON.stringify(data)}&storeRoom=${JSON.stringify(storeRoom)}`
				})
			},
			//打电话
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			// 调起导航
			tenxun() {
				goTenXunLoca(this.doorMes.address, this.doorMes.latitude, this.doorMes.longitude);
			},
      timerHour(paramTime){
        //获取当前时间与指定的时间差，得到相差的小时数，格式是HH
        let nowTime = new Date().getTime();
        let time = new Date(paramTime).getTime();
        let diff = (nowTime - time) / 1000 / 60 / 60;
        let hour = Math.floor(diff);
        return hour < 10 ? '0' + hour : hour;
      },
      timerMinute(paramTime){
        //获取当前时间与指定的时间差，得到相差的分钟数，格式是MM
        let nowTime = new Date().getTime();
        let time = new Date(paramTime).getTime();
        let diff = (nowTime - time) / 1000 / 60;
        let minute = Math.floor(diff % 60);
        return minute < 10 ? '0' + minute : minute;
      },
      timerSecond(paramTime){
        //获取当前时间与指定的时间差，得到相差的秒数，格式是SS
        let nowTime = new Date().getTime();
        let time = new Date(paramTime).getTime();
        let diff = (nowTime - time) / 1000;
        let second = Math.floor(diff % 60);
        return second < 10 ? '0' + second : second;
      },
			//跳转
			goPage(url){
        let storeId = this.doorMes.id;
        url += "&storeId="+storeId;
				uni.navigateTo({
					url
				})
			},

			//扫码
			scanQRCode() {
			    uni.scanCode({
			        success(res) {
			            if (res.result) {
			                // 扫描成功，处理二维码内容
			                console.log('扫描结果：', res.result);
			                // 这里可以进行后续操作，如跳转页面、显示信息等
			            } else {
			                // 扫描失败
			                uni.showToast({
			                    title: '扫描失败',
			                    icon: 'none'
			                });
			            }
			        },
			        fail() {
			            // 调用相机失败
			            uni.showToast({
			                title: '调用相机失败',
			                icon: 'none'
			            });
			        }
			    });
			}


		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.content{
		position: relative;
		width: 100vw;
		background: url(https://qn.zqbond.com/wxmp/desk-bg.png) no-repeat;
		background-size: 100% 277rpx;
	}
	.u-content{
		margin-top: 130rpx;
		padding: 30rpx 30rpx 0;
		font-size: 34rpx;
		z-index: 11;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		.top-mes{
			.door-name{
				font-size: 42rpx;
				font-weight: bold;
				max-width: 600rpx;
			}
			.desk-price{
				margin: 16rpx 0;
				.price-item{
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					margin-right: 10rpx;
					>text{
						color: #FF7814;
					}
				}
			}
			.adress-phone{
				justify-content: space-between;
				.call-phone-adress{
					>view{
						align-items: center;

						>image{
							width:30rpx;
							height: 30rpx;
							margin-bottom: 6rpx;
						}
						font-size: 26rpx;
						color: #666666;
						&:nth-child(2){
							margin-left: 30rpx;
							>image{
								width:32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
			.time-adress{
				>view{
					>image{
						width:20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
					>text{
						max-width: 440rpx;
						margin-right: 8rpx;
					}
					font-size: 26rpx;
					color: #666666;
					&:nth-child(1){
						margin-bottom: 8rpx;
					}
				}
			}
		}
		.play-area{
			margin-top: 30rpx;
			.play-con-title{
				.play-tit{
					align-items: center;
					margin-right: 20rpx;
				}
				.play-tit.active{
					>text{
						font-size: 34rpx;
						color: #FF7814;
						font-weight: bold;
					}
					.line-down{
						margin-top: 16rpx;
						width: 52rpx;
						height: 10rpx;
						background: linear-gradient(90deg, #FF732E 0%, #FFB245 100%);
						border-radius: 5rpx;
					}
				}
			}
			.desk-item{
				.price-time{
					justify-content: space-between;
					margin: 30rpx 0;
					>view{
						&:nth-child(1){
							font-size: 30rpx;
							color: #333333;
							font-weight: bold;
						}
						&:nth-child(2){
							font-size: 26rpx;
							color: #666666;
							text{
								color: #FF7814;
								margin-left: 20rpx;
							}
						}
					}
				}
				.desk-table{
					flex-wrap: wrap;
					justify-content: space-between;
					.desk-table-item{
						width: 327rpx;
						height: 210rpx;
						background: url(https://qn.zqbond.com/wxmp/desk-sel.png) no-repeat;
						background-size: 100% 100%;
						border-radius: 8rpx;
						align-items: center;
						justify-content: center;
						position: relative;
						margin-bottom: 30rpx;
						.num{
							font-size: 26rpx;
							color: #FFFFFF;
							margin-bottom: 10rpx;
              font-weight: bold;
						}
						.playing{
							font-size: 26rpx;
							color: #FFFFFF;
						}
            .time {
              display: flex;
              align-items: center;
              margin-bottom: 10rpx;
              &__custom {
                margin-top: 4rpx;
                width: 40rpx;
                height: 40rpx;
                background-color: #0B6146;
                border-radius: 4px;
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                justify-content: center;
                align-items: center;

                &__item {
                  color: #fff;
                  font-size: 22rpx;
                  text-align: center;
                }
              }

              &__doc {
                color: #0B6146;
                padding: 0 4px;
              }

              &__item {
                color: #606266;
                font-size: 15px;
                margin:0 4px;
              }
            }
						>image{
							position: absolute;
							top: 10rpx;
							right: 10rpx;
							z-index: 1;
							width: 106rpx;
							height: 105rpx;
						}
						.open-btn-now,.over-btn{
							width: 180rpx;
							height: 55rpx;
							line-height: 55rpx;
							background: linear-gradient(0deg, #0B6146, #019969);
							box-shadow: 0px 1rpx 0px 0px rgba(149,242,204,0.7), 0px -2rpx 0px 0px rgba(37,107,78,0.6);
							border-radius: 28rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							text-align: center;
						}
						.desk-btn{
							.due-btn{
								width: 94rpx;
								height: 55rpx;
								line-height: 55rpx;
								background: rgba(183, 255, 237, .2);
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								border-top-left-radius: 28rpx;
								border-bottom-left-radius: 28rpx;
							}
							.open-btn{
								width: 136rpx;
								height: 55rpx;
								line-height: 55rpx;
								background: linear-gradient(0deg, #0B6146, #019969);
								font-size: 24rpx;
								color: #FFFFFF;
								text-align: center;
								border-top-right-radius: 28rpx;
								border-bottom-right-radius: 28rpx;
							}
						}
					}
					.desk-table-item-grey{
						background-image: url(https://qn.zqbond.com/wxmp/desk-grey.png);
						.num{
							color: #0B6146;
						}
						.playing{
							color: #333333;
						}
					}
				}
			}
		}
	}
	.btm-area{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 11;
		width: 100vw;
		height: 96rpx;
		background: #FFFFFF;
		border: 1rpx solid #EEEEEE;
		box-shadow: 0px 0px 19rpx 1rpx rgba(0,0,0,0.1);
		justify-content: space-between;
		padding: 0 26rpx 0 40rpx;
		box-sizing: border-box;
		.left-btm{
			flex: 1;
			>view{
				align-items: center;
				margin-left: 40rpx;
				>image{
					width:40rpx;
					height: 36rpx;
					margin-bottom: 6rpx;
				}
				font-size: 22rpx;
				color: #333333;
				&:nth-child(2){

					>image{
						width:51rpx;
						height: 34rpx;
					}
				}
			}
		}
		.scan-btn{
			width: 240rpx;
			height: 72rpx;
			line-height: 72rpx;
			background: #FF7814;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>

